<template>
  <div class="page-container">
    <h2>编辑直播</h2>
    <el-form ref="formRef" :model="formData" :rules="formRules" label-width="100px" class="form-card">
      <el-form-item label="直播信息" prop="liveInfo">
        <el-input v-model="formData.liveInfo" type="textarea" :rows="3" placeholder="请输入直播详细信息" />
      </el-form-item>
      <el-form-item label="预约数" prop="reserveNum">
        <el-input-number v-model="formData.reserveNum" :min="0" />
      </el-form-item>
      <el-form-item label="直播状态" prop="liveState">
        <el-select v-model="formData.liveState" placeholder="请选择直播状态">
          <el-option label="未开始" :value="0" />
          <el-option label="进行中" :value="1" />
          <el-option label="已结束" :value="2" />
        </el-select>
      </el-form-item>
      <el-form-item label="商品状态" prop="goodsState">
        <el-radio-group v-model="formData.goodsState">
          <el-radio :label="1">上架</el-radio>
          <el-radio :label="0">下架</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item>
        <el-button @click="handleReset">重置</el-button>
        <el-button type="primary" :loading="submitting" @click="handleSubmit">保存</el-button>
        <el-button type="danger" :loading="deleting" @click="handleDelete">删除</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'
import { liveApi } from '@/api/live'

const route = useRoute()
const router = useRouter()
const formRef = ref()
const submitting = ref(false)
const deleting = ref(false)

const formData = reactive({
  liveId: null,
  liveInfo: '',
  reserveNum: 0,
  liveState: 0,
  goodsState: 1
})

const formRules = {
  liveInfo: [{ required: true, message: '请输入直播信息', trigger: 'blur' }],
  liveState: [{ required: true, message: '请选择直播状态', trigger: 'change' }],
  goodsState: [{ required: true, message: '请选择商品状态', trigger: 'change' }]
}

const loadDetail = async () => {
  // 当前后端无详情接口，这里简化为依旧从列表接口按条件获取
  // 可根据需要扩展：若提供 /live/detail?id=XX 则直接调用
}

onMounted(() => {
  const id = route.params.id
  if (id) {
    formData.liveId = Number(id)
  }
  loadDetail()
})

const handleReset = () => {
  if (formData.liveId) return
  Object.assign(formData, { liveInfo: '', reserveNum: 0, liveState: 0, goodsState: 1 })
}

const handleSubmit = async () => {
  try {
    await formRef.value.validate()
    submitting.value = true
    if (formData.liveId) {
      await liveApi.updateLive(formData)
      ElMessage.success('保存成功')
    } else {
      await liveApi.addLive(formData)
      ElMessage.success('新增成功')
      router.replace('/live')
    }
  } catch (e) {
    if (e !== false) ElMessage.error('保存失败')
  } finally {
    submitting.value = false
  }
}

const handleDelete = async () => {
  if (!formData.liveId) return
  try {
    await ElMessageBox.confirm('确定要删除该直播吗？', '提示', { type: 'warning' })
    deleting.value = true
    await liveApi.deleteLive(formData.liveId)
    ElMessage.success('删除成功')
    router.replace('/live')
  } catch (e) {
    if (e !== 'cancel') ElMessage.error('删除失败')
  } finally {
    deleting.value = false
  }
}
</script>

<style scoped>
.page-container { padding: 20px; }
.form-card { max-width: 600px; }
</style>


